import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const RadioTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
  });

  // 受控示例状态
  const [radioA, setRadioA] = useState<boolean>(false);
  const [radioB, setRadioB] = useState<boolean>(true);
  const [groupControlled, setGroupControlled] = useState<string | number>('opt2');

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Radio 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="RadioTestScreen"
    >
      {/* 基础用法：非受控与受控 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            checked + onChange（受控）；不传 checked 可作为非受控（但 Radio 本身实现为受控切换）
          </UI.Text>
          <View style={styles.row}>
            <UI.Radio checked={radioA} onChange={setRadioA} label={`A：${radioA ? '选中' : '未选中'}`} testID="radio-controlled-a" />
            <UI.Radio checked={radioB} onChange={(next) => setRadioB(next)} label={`B：${radioB ? '选中' : '未选中'}`} testID="radio-controlled-b" />
            <UI.Radio label="非受控（仅展示）" testID="radio-uncontrolled-hint" />
          </View>
        </Layout.Card>
      </View>

      {/* 禁用状态：disabled */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>禁用状态</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            disabled 显示置灰且不可点击
          </UI.Text>
          <View style={styles.row}>
            <UI.Radio disabled label="禁用（未选中）" testID="radio-disabled-unchecked" />
            <UI.Radio disabled checked label="禁用（选中）" testID="radio-disabled-checked" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：small / medium / large / 自定义数值 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            size: small / medium / large / number（像素）
          </UI.Text>
          <View style={styles.row}>
            <UI.Radio size="small" label="small" checked testID="radio-size-small" />
            <UI.Radio size="medium" label="medium" checked testID="radio-size-medium" />
            <UI.Radio size="large" label="large" checked testID="radio-size-large" />
            <UI.Radio size={28} label="28px" checked testID="radio-size-28" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：主题预设 + 自定义 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            color: primary / secondary / success / warning / error / info / '#RRGGBB'
          </UI.Text>
          <View style={styles.row}>
            <UI.Radio color="primary" label="primary" checked testID="radio-color-primary" />
            <UI.Radio color="secondary" label="secondary" checked testID="radio-color-secondary" />
            <UI.Radio color="success" label="success" checked testID="radio-color-success" />
            <UI.Radio color="warning" label="warning" checked testID="radio-color-warning" />
            <UI.Radio color="error" label="error" checked testID="radio-color-error" />
            <UI.Radio color="info" label="info" checked testID="radio-color-info" />
            <UI.Radio color="#8A2BE2" label="#8A2BE2" checked testID="radio-color-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：p/m/mh/mv/ph/pv（应用于外层 Pressable） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            支持通用 SpacingProps：p/m/mh/mv/ph/pv
          </UI.Text>
          <View style={[styles.row, { borderWidth: 1, borderColor: colors.border, padding: 8 }]}>
            <UI.Radio label="m=12" m={12} checked testID="radio-spacing-m" />
            <UI.Radio label="mh=12" mh={12} checked testID="radio-spacing-mh" />
            <UI.Radio label="mv=8" mv={8} checked testID="radio-spacing-mv" />
            <UI.Radio label="p=4" p={4} checked testID="radio-spacing-p" />
            <UI.Radio label="ph=8" ph={8} checked testID="radio-spacing-ph" />
            <UI.Radio label="pv=4" pv={4} checked testID="radio-spacing-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 标签样式：labelStyle */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>标签样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            通过 labelStyle 自定义标签文字样式（颜色/大小/粗细等）
          </UI.Text>
          <View style={styles.row}>
            <UI.Radio
              checked
              label="自定义标签样式"
              labelStyle={{ color: colors.success, fontSize: 16, fontWeight: '600' }}
              testID="radio-label-style"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 分组：非受控 + layout/gap/选项禁用 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>分组（非受控）</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            RadioGroup 支持 vertical / horizontal 布局、gap 间距；选项可单独 disabled
          </UI.Text>
          <UI.RadioGroup
            defaultValue="opt2"
            layout="horizontal"
            gap={12}
            options={[
              { label: 'A', value: 'opt1' },
              { label: 'B（禁用）', value: 'opt2', disabled: true },
              { label: 'C', value: 'opt3' },
            ]}
            testID="radiogroup-uncontrolled-horizontal"
          />
          <View style={{ height: 12 }} />
          <UI.RadioGroup
            defaultValue="opt1"
            layout="vertical"
            options={[
              { label: '一', value: 'v1' },
              { label: '二', value: 'v2' },
              { label: '三（禁用）', value: 'v3', disabled: true },
            ]}
            testID="radiogroup-uncontrolled-vertical"
          />
        </Layout.Card>
      </View>

      {/* 分组：受控 + size/color/disabled */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>分组（受控）</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            通过 value + onChange 管理选中值；size/color 透传到子项；disabled 将整体不可操作
          </UI.Text>
          <UI.RadioGroup
            value={groupControlled}
            onChange={(val) => setGroupControlled(val)}
            size="large"
            color="primary"
            layout="horizontal"
            options={[
              { label: '选项1', value: 'opt1' },
              { label: '选项2', value: 'opt2' },
              { label: '选项3', value: 'opt3' },
            ]}
            testID="radiogroup-controlled-horizontal"
          />
          <View style={{ height: 12 }} />
          <UI.RadioGroup
            value={'opt1'}
            onChange={() => {}}
            size="small"
            color="#FF7F50"
            disabled
            layout="vertical"
            options={[
              { label: '禁用组-1', value: 'opt1' },
              { label: '禁用组-2', value: 'opt2' },
            ]}
            testID="radiogroup-controlled-disabled"
          />
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default RadioTestScreen;